<script setup>
import { ref } from 'vue';
import 'element-plus/dist/index.css';

const user = ref({
  username: 'hello vue',
  gender: '男',
  job: '前端开发工程师',
  sign: '',
});

const activeIndex = ref('1');
const isLoggedIn = ref(false);

const myArticleList = ref([]);
const productList = ref([]);
const courseList = ref([]);
const articleList = ref([]);
</script>

<template>
  <el-container>
    
    <el-container>
      <el-aside>
        <el-card>
          <el-menu default-active="activeIndex">
            <el-menu-item index="1">个人主页</el-menu-item>
            <el-menu-item index="2">个人资料</el-menu-item>
            <el-menu-item index="3">账号设置</el-menu-item>
            <el-menu-item index="4">消息设置</el-menu-item>
            <el-menu-item index="5">标签管理</el-menu-item>
          </el-menu>
        </el-card>
      </el-aside>
      <el-main>
        <el-card>
          <el-row>
            <el-col :span="4">
              <img src="/src/assets/images/avatar.png" style="height: 80px; width: 70px;">
            </el-col>
            <el-col :span="20">
              <h2>{{ user.username }}</h2>
              <span>性别: {{ user.gender }}</span>
              <span>签名档：{{ user.sign }}</span>
            </el-col>
          </el-row>
        </el-card>
        <el-card>
          <el-tabs>
            <el-tab-pane label="我发布的文章">
              <div v-if="myArticleList.length > 0">列表数据</div>
              <el-empty v-else description="暂无数据" />
            </el-tab-pane>
            <el-tab-pane label="我收藏的文章">
              <div v-if="articleList.length > 0">列表数据</div>
              <el-empty v-else description="暂无数据" />
            </el-tab-pane>
            <el-tab-pane label="我收藏的课程">
              <div v-if="courseList.length > 0">列表数据</div>
              <el-empty v-else description="暂无数据" />
            </el-tab-pane>
            <el-tab-pane label="我收藏的商品">
              <div v-if="productList.length > 0">列表数据</div>
              <el-empty v-else description="暂无数据" />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-main>
    </el-container>

   
  </el-container>
</template>

<style scoped>
.el-carousel-item img {
  width: 100%;
  height: 100%;
}
</style>